<!-- 个人中心 -->
<template>
	<view class="personal-wrap">
		<!-- 个人信息卡片 -->
		<userinfo-card v-if="userHeadData && userHeadData.style" :scrollTop="scrollTop" :detail="userHeadData" @onShare="onShare"></userinfo-card>

		<!-- 自定义模块 -->
		<view v-for="(item, index) in userTemplate" :key="item.id">
			<!-- 轮播 -->
			<sh-banner
				v-if="item.type === 'banner_XXX' && index !== 0"
				:Px="item.content.x"
				:Py="item.content.y"
				:borderRadius="item.content.radius"
				:height="item.content.height"
				:list="item.content.list"
			></sh-banner>
			<!-- 滑动宫格 -->
			<sh-grid-swiper v-if="item.type === 'menu_XXX'" :list="item.content.list" :oneRowNum="item.content.style"></sh-grid-swiper>
			<!-- 广告魔方 -->
			<sh-adv v-if="item.type === 'adv_XXX'" :detail="item.content"></sh-adv>
			<!-- 推荐商品 -->
			<sh-hot-goods v-if="item.type === 'goods-list_XXX' || item.type === 'goods-group'" :detail="item.content"></sh-hot-goods>
			<!-- 富文本 -->
			<sh-richtext v-if="item.type === 'rich-text_XXX'" :richId="item.content.id"></sh-richtext>
			<!-- 功能列表 -->
			<sh-cell v-if="item.type === 'nav-list_XXX'" :list="item.content.list"></sh-cell>
			<!-- 九宫格列表 -->
			<sh-grid v-if="item.type === 'grid-list_XXX'" :list="item.content.list"></sh-grid>
			<!-- 钱包 -->
			<sh-wallet v-if="item.type === 'wallet-card_XXX'"></sh-wallet>
			<!-- 订单卡片 -->
			<sh-order-card v-if="item.type === 'order-card'"></sh-order-card>
		</view>
		
		
		<view class="sh-user-nav">
			<view class="nav-list-div" @tap="jump('/pages/order/my_integral')">
				<view class="u-flex" >
					<text class="">我的积分</text>
				</view>
				<view>
					<image class="jump" src="/static/images/Chevron.png">
				</view>
			</view>
			
			<view class="nav-list-div" @tap="jump('/pages/order/my_comment')">
				<view class="u-flex" >
					<text class="">我的评价</text>
				</view>
				<view>
					<image class="jump" src="/static/images/Chevron.png">
				</view>
			</view>	
			
			<view class="nav-list-div" @tap="jump('/pages/index/other/my-member')">
				<view class="u-flex" >
					<text class="">会员等级</text>
				</view>
				<view>
          <image class="jump" src="/static/images/Chevron.png"></image>
				</view>
			</view>

      <view class="nav-list-div" @tap="jump('/pages/user/my-ask')">
        <view class="u-flex" >
          <text class="">我的提问</text>
        </view>
        <view>
          <image class="jump" src="/static/images/Chevron.png"></image>
        </view>
      </view>

      <view class="nav-list-div" @tap="jump('/pages/public/richtext?id=2')">
        <view class="u-flex" >
          <text class="">隐私协议</text>
        </view>
        <view>
          <image class="jump" src="/static/images/Chevron.png"></image>
        </view>
      </view>

      <view class="nav-list-div" @tap="jump('/pages/public/richtext?id=1')">
        <view class="u-flex" >
          <text class="">注册协议</text>
        </view>
        <view>
          <image class="jump" src="/static/images/Chevron.png"></image>
        </view>
      </view>

      <button open-type="contact" class="nav-list-div" show-message-card="true">
        <view class="u-flex" >
          <text class="">在线客服</text>
        </view>
        <view>
          <image class="jump" src="/static/images/Chevron.png"></image>
        </view>
      </button>



			
<!--			<view class="nav-list-div" @tap="jump('/pages/questionnaire/my_multiple')">-->
<!--				<view class="u-flex" >-->
<!--					<image class="tubiao" src="/static/images/my-questionnaire.png">-->
<!--					<text class="">我的问卷</text>-->
<!--				</view>-->
<!--				<view>-->
<!--					<image class="jump" src="/static/images/Chevron.png">-->
<!--				</view>-->
<!--			</view>-->

<!--			<view class="nav-list-div" @tap="jump('/pages/activity/sign/index')">-->
<!--				<view class="u-flex" >-->
<!--					<image class="tubiao" src="/static/images/sign.png">-->
<!--					<text class="">签到</text>-->
<!--				</view>-->
<!--				<view>-->
<!--					<image class="jump" src="/static/images/Chevron.png">-->
<!--				</view>-->
<!--			</view>-->
		</view>
		
		<!-- copyright -->
<!-- 		<view class="copyright-box u-flex-col u-row-center u-col-center u-p-t-80 u-p-b-50" v-if="initShop.copyright">
			<view class="copyright-text">{{ initShop.copyright[0] }}</view>
			<view class="copyright-text">{{ initShop.copyright[1] }}</view>
		</view> -->

		<!-- #ifdef H5 -->
		<view class="tabbar-hack" style="height: 120rpx; width:100%;"></view>
		<!-- #endif -->
		<!-- 登录提示 -->
		<shopro-auth-modal></shopro-auth-modal>
		<!-- 分享组件 -->
		<shopro-share v-model="showShare" posterType="user"></shopro-share>
		<shopro-tabbar></shopro-tabbar>
	</view>
</template>

<script>
import shBanner from './components/sh-banner.vue';
import shGridSwiper from './components/sh-grid-swiper.vue';
import shAdv from './components/sh-adv.vue';
import shRichtext from './components/sh-richtext.vue';
import shCell from './components/sh-cell.vue';
import shGrid from './components/sh-grid.vue';
import shOrderCard from './components/sh-order-card.vue';
import shWallet from './components/sh-wallet.vue';
import shHotGoods from './components/sh-hot-goods.vue';

import userinfoCard from './user/userinfo-card.vue';

import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';

import share from '@/shopro/share';
import store from "@/shopro/store";

export default {
	components: {
		shBanner,
		shGridSwiper,
		shAdv,
		shRichtext,
		shCell,
		shGrid,
		shWallet,
		shOrderCard,
		shHotGoods,

		userinfoCard
	},
	data() {
		return {
			scrollTop: 0,
			showShare: false,
			enable: false, //是否开启吸顶。
		};
	},
	computed: {
		...mapGetters(['initShop', 'userTemplate', 'isLogin', 'userInfo', 'authType']),
		userHeadData() {
			if (this.userTemplate?.length) {
				return this.userTemplate[0].content;
			}
		}
	},
	// 下拉刷新
	onPullDownRefresh() {
		this.init();
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},

  onLoad(){
    if(!this.$store.getters.isLogin){
      this.$store.dispatch('showAuthModal', 'accountLogin');
    }else{
      let mobile = this.$store.getters.userInfo.mobile;
      if(mobile){

      }else{
        this.$store.dispatch('showAuthModal', 'bindMobile');
      }
    }
  },
	onShow() {
		if (this.isLogin) {
			this.init();
			this.getUserData();
		}
		this.enable = true;
	},

	methods: {
		...mapActions(['getUserInfo', 'showAuthModal', 'getUserData']),
		onShare() {
			this.showShare = true;
			uni.hideTabBar();
		},
		// 初始化
		init() {
			this.getUserInfo()
				.then(res => {
					uni.stopPullDownRefresh();
				})
				.catch(e => {
					uni.stopPullDownRefresh();
				});
		},
		// 路由跳转
		jump(path, parmas) {
			this.showShare = false;
			this.$Router.push({
				path: path,
				query: parmas
			});
		},
		getIntegral(){
			let that = this;
			that.$http('user.getIntegral', {
			}).then(res => {
				if (res.code === 1) {
					that.userInfo.is_integral = 1;
				}
			});
		},
	}
};
</script>

<style lang="scss">
	.cu-bar .action:first-child {
	    margin: auto;
	}
	.cu-custom .cu-bar {
	    padding-right: initial;
	}
	.personal-wrap{
    color: #444;
		min-height: 100%;
    background: #ececec;
	}
.copyright-box {
	.copyright-text {
		font-size: 22rpx;
		font-weight: 500;
		color: #444;
	}
}
.sh-add-integral{
	background-color:#bebebe;
	margin: 40rpx 25rpx 40rpx 25rpx;
	padding: 37rpx 30rpx 40rpx 20rpx;
	border-radius: 21rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	.add-integral-text{
		color: #444;
		font-size: 27rpx;
		font-weight: bold;
	}
	.add-integral-go{
		color: #444;
		font-size: 21rpx;
		font-weight: bold;
		background-color:#bebebe;
		border-radius: 21rpx;
		padding: 10rpx 41rpx 10rpx 41rpx;
	}
}

button.nav-list-div{
  line-height: unset;
  background: #ffffff;
  &:hover{
    background: #fff;
  }
  &:after{
    display: none;
  }
}
.sh-user-nav{
  background-color:#fff;
  margin: 40rpx 25rpx 40rpx 25rpx;
  padding: 30rpx 20rpx 20rpx 20rpx;
  border-radius: 21rpx;
}
.nav-list-div{
	border-bottom: 2rpx solid rgba(255, 255, 255, 0.1);
	padding: 20rpx 0 20rpx 18rpx;
	display: flex;
	justify-content: space-between;
	.tubiao{
		width: 35rpx;
		height: 35rpx;
		margin: 0 29rpx 0 25rpx;
	}
	.jump{
		width: 12rpx;
		height: 24rpx;
		margin-right: 12rpx;
	}
	text{
    font-weight: bold;
		font-size: 26rpx;
		color: #444;
	}
}
</style>
